<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!doctype html>
<html>
 <head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"> 
	<meta name="renderer" content="webkit">
	<title>提交订单</title>
    <link rel="shortcut icon" type="image/x-icon" href="${path}/static/front/icon/favicon.ico">
	<link rel="stylesheet" type="text/css" href="${path}/static/front/css/base.css">
	<link rel="stylesheet" type="text/css" href="${path}/static/front/css/home.css">
	<link rel="stylesheet" type="text/css"  href="${path}/static/front/css/reset.css">
	<link rel="stylesheet" type="text/css"  href="${path}/static/front/css/main.css">
	<script type="text/javascript" src="${path}/static/front/js/jquery.js"></script>
    <script type="text/javascript">
         (function(a){
             a.fn.hoverClass=function(b){
                 var a=this;
                 a.each(function(c){
                     a.eq(c).hover(function(){
                         $(this).addClass(b)
                     },function(){
                         $(this).removeClass(b)
                     })
                 });
                 return a
             };
         })(jQuery);

         $(function(){
             $("#pc-nav").hoverClass("current");
         });




         $(document).ready(function($){

             $(".btn1").click(function(event){
                 $(".hint").css({"display":"block"});
                 $(".box").css({"display":"block"});
             });

             $(".hint-in3").click(function(event) {
                 $(".hint").css({"display":"none"});
                 $(".box").css({"display":"none"});
             });

             $(".hint3").click(function(event) {
                 $(this).parent().parent().css({"display":"none"});
                 $(".box").css({"display":"none"});
             });

             $("#H-table li").each(function(i){
                 $(this).click((function(k){
                     var _index = k;
                     return function(){
                         $(this).addClass("cur").siblings().removeClass("cur");
                         $(".H-over").hide();
                         $(".H-over:eq(" + _index + ")").show();
                     }
                 })(i));
             });

         });
     </script>


 </head>
 <body>

<div class="box">
    <div class="hint">
        <div class="hint-in1">
            <div class="hint2">添加收货地址</div>
            <div class="hint3"></div>
        </div>


        <div class="pc-label"><label><i class="reds ">*</i>收货人:</label><input type="text" placeholder="请您填写收货人姓名"></div>
        <div id="sjld" style="margin-top:10px; padding-left:40px; position:relative;" class="clearfix">

            <div class="clearfix" style="padding-bottom:5px;"><i class="reds fl">*</i><p class="fl">所在地区:</p></div>

            <div class="m_zlxg" id="shenfen">

                <p title="">选择省份</p>
                <div class="m_zlxg2">
                    <ul></ul>
                </div>
            </div>
            <div class="m_zlxg" id="chengshi">
                <p title="">选择城市</p>
                <div class="m_zlxg2">
                    <ul></ul>
                </div>
            </div>
            <div class="m_zlxg" id="quyu">
                <p title="">选择区域</p>
                <div class="m_zlxg2">
                    <ul></ul>
                </div>
            </div>
            <input id="sfdq_num" type="hidden" value="" />
            <input id="csdq_num" type="hidden" value="" />
            <input id="sfdq_tj" type="hidden" value="" />
            <input id="csdq_tj" type="hidden" value="" />
            <input id="qydq_tj" type="hidden" value="" />
        </div>

        <div class="pc-label"><label><i class="reds ">*</i>详细地址:</label><input type="text" style="width:400px; " placeholder="请您填写收货人详细地址"></div>
        <div class="pc-label"><label><i class="reds ">*</i>手机号码:</label><input type="text" style="width:400px;"placeholder="请您填写收货人手机号码"></div>
        <div class="pc-label"><label>邮箱:</label><input type="text" style="width:400px;" placeholder="请您填写邮箱地址"></div>
        <a href="javascript:;" class="hint-in3">保存收货地址</a>
    </div>

</div>

<!--- header begin-->
<header id="pc-header">
    <div class="BHeader">
        <div class="yNavIndex">
            <ul class="BHeaderl">
	            <c:if test="${empty user }">
	              <li><a href="#" onclick="login()">登录</a> </li>
	              <li class="headerul">|</li>
	              <li><a href="#">注册</a> </li>
	              <li class="headerul">|</li>
	           </c:if>
	            <c:if test="${not empty user }">
	              <li><a href="#">欢迎：${user.username }</a> </li>
	              <li class="headerul">|</li>
	              <li><a href="#">用户中心</a> </li>
	              <li class="headerul">|</li>
	              <li><a href="${path}/cart/getCartListJsp.shtml?userId=${user.id}">我的购物车</a> </li>
	              <li class="headerul">|</li>
	              <li><a href="${path}/order/getOrderListJsp.shtml">我的订单</a> </li>
	            </c:if> 
            </ul>
        </div>
    </div>
    <div class="container clearfix">
        <div class="header-logo fl" style="width:212px;"><h1><a href="${path}/index.shtml"><img src="${path}/static/front/icon/logo.png"></a></h1></div>
        <div class="pc-order-titlei fl"><h2>填写订单</h2></div>
        <div class="pc-step-title fl">
            <ul>
                <li class="cur2"><a href="#">1 . 我的购物车</a></li>
                <li class="cur"><a href="#">2 . 填写核对订单</a></li>
                <li><a href="#">3 . 成功提交订单</a></li>
            </ul>
        </div>
    </div>

</header>
<!-- header End -->


<!-- 订单提交成功 begin-->
	<form id="orderForm" class="layui-form layui-form-pane" action="">	
		<h3 class="common_title">确认收货地址</h3>
	
	<!-- 2020.04.01 1.遍历 shippingList地址信息 -->
		<c:forEach items="${shippingList }" var="shipping">
		
			<div class="common_list_con clearfix" id="shippingItem${shipping.id}">
				<dl>
					<dt>寄送到：</dt>
					<dd><input type="radio" name="shippingId" value="${shipping.id}" >
						${shipping.receiverName}-${shipping.receiverPhone}-${shipping.receiverProvince}-${shipping.receiverCity}-${shipping.receiverDistrict}-${shipping.receiverAddress}
					</dd>
				</dl>
				<a href="user_center_site.html" class="edit_site">编辑收货地址</a>
			</div>
		
		</c:forEach>
	
	<!-- 2020.04.01 2.修改 支付方式paymentType -->	
		<h3 class="common_title">支付方式</h3>	
		<div class="common_list_con clearfix">
			<div class="pay_style_con clearfix">
				<input type="radio" name="paymentType" value="0">
				<label class="cash">货到付款</label>
				<input type="radio" name="paymentType" value="1">
				<label class="weixin">微信</label>
				<input type="radio" name="paymentType" value="2">
				<label class="zhifubao">支付宝</label>
				<input type="radio" name="paymentType" value="3">
				<label class="bank">银联闪付</label>
			</div>
		</div>
	
		<h3 class="common_title">商品列表</h3>
		
		<div class="common_list_con clearfix">
			<ul class="goods_list_th clearfix">
				<li class="col01">商品名称</li>
				<li class="col02">商品单位</li>
				<li class="col03">商品价格</li>
				<li class="col04">数量</li>
				<li class="col05">小计</li>		
			</ul>
		
	<!-- 2020.04.01 3.遍历 cartList购物车的商品信息 -->	
			<c:forEach items="${cartList}" var="cart" >
				<ul class="goods_list_td clearfix" id="cartItem${cart.id}">
					<li class="col01">1</li>			
					<li class="col02"><img src="<%-- ${cart.product.mainImageFullUrl} --%>/pic/${cart.product.mainImage}"></li>
					<li class="col03">${cart.product.name}</li>
					<li class="col04">件</li>
					<li class="col05">${cart.product.price}元</li>
					<li class="col06">${cart.quantity}</li>
					<li class="col07">${cart.product.price * cart.quantity}元</li>	
				</ul>
			</c:forEach>
		</div>
	
		<h3 class="common_title">总金额结算</h3>
	
		<div class="common_list_con clearfix">
			<div class="settle_con">
				<div class="total_goods_count">共<em>2</em>件商品，总金额<b>42.60元</b></div>
				<div class="transit">运费：<b>10元</b></div>
				<div class="total_pay">实付款：<b>52.60元</b></div>
			</div>
		</div>
	
		<div class="order_submit clearfix">
			<a href="#" id="order_btn" onclick="submitOrderForm()">提交订单</a>
		</div>	
	</form><!-- 订单提交成功 End-->


<!--- footer begin-->
<div class="aui-footer-bot">
    <div class="time-lists aui-footer-pd clearfix">
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img src="${path}/static/front/icon/icon-d1.png"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a href="#">保障范围 </a> </li>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img src="${path}/static/front/icon/icon-d2.png"></span>
                <em>新手上路</em>
            </h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img src="${path}/static/front/icon/icon-d3.png"></span>
                <em>保障正品</em>
            </h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img src="${path}/static/front/icon/icon-d1.png"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
    </div>
    <div style="border-bottom:1px solid #dedede"></div>
    <div class="time-lists aui-footer-pd time-lists-ls clearfix">
        <div class="aui-footer-list clearfix">
            <h4>购物指南</h4>
            <ul>
                <li><a href="#">保障范围 </a> </li>
                <li><a href="#">购物流程</a> </li>
                <li><a href="#">会员介绍 </a> </li>
                <li><a href="#">生活旅行</a> </li>
                <li><a href="#"> 常见问题 </a> </li>
                <li><a href="#"> 联系客服购物指南 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>特色服务</h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>帮助中心</h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>新手指导</h4>
            <ul>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">退货退款流程</a> </li>
                <li><a href="#">服务中心 </a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#">服务中心</a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
                <li><a href="#"> 更多特色服务 </a> </li>
            </ul>
        </div>
    </div>
</div>
<!-- footer End -->

<script type="text/javascript" src="${path}/static/front/js/address.js"></script>
<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

		
		/* 2020年4月2日  创建订单  order信息☞order表    */
		function submitOrderForm() {
			$.post(
				"${path}/order/insertOrder.shtml",  
				$("#orderForm").serialize(),  /* shippingId地址信息、paymentType支付方式（3支付宝） */
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successUrl(result.msg, "${path}/order/getOrderListJsp.shtml");
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}


/* 自带的 自带的 */
    $(function(){

        $("#sjld").sjld("#shenfen","#chengshi","#quyu");

    });
</script>
</body>
</html>